<script  setup>

import { ArrowDown } from '@element-plus/icons-vue'
import { onMounted, getCurrentInstance, reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import yy from './yy.vue'
import Yy from './yy.vue'
// import require from 'axios'
let { proxy } = getCurrentInstance();
let arr = ref([]);

let carouseData = ref([]);

const input1 = ref('');
let arr1 = ref([]);


onMounted(async () => {
    let re = await proxy.$axios("/bzlx");
    // console.log(re.data);
    arr1.value = re.data;
});
onMounted(async () => {
    let re = await proxy.$axios("/bzlx");
    // console.log(re.data);
    arr1.value = re.data;
    //   p1size.value = "17px";
    //   p1color.value = "#222222";
    //   p2size = ref("14px");
    //   p2color = ref("#999");
});

onMounted(async () => {
    let res = await proxy.$axios.get("/wyhlunbo")
    carouseData.value = res.data
    console.log(111111);
});

// const carouseData =
//     [
//         { url: require("@/assets/index/001.png") },
//         { url: require("@/assets/index/002.png") },
//         { url: require("@/assets/index/003.png") },
//         { url: require("@/views/wyh/img/lunbo1.jpg") },

//     ]

</script>

<template>

    <div class="common-layout">
        <el-container>
            <!-- 头部 -->
            <el-header>
                <a href="" class="logo-link"> </a>
                <!-- 中间搜索 -->
                <div class="search">
                    <h1>WeKonw</h1>
                    <div class="nav-input">
                        <el-input type="text" placeholder="书籍，电影，音乐，小组" v-model="input1">
                            <template #append>
                                <el-button :icon="Search" />
                            </template>
                        </el-input>
                    </div>
                </div>

                <!-- 右侧导航下拉菜单 -->
                <el-dropdown>
                    <el-button type="primary">
                        导航菜单<el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </el-button>

                    <template #dropdown>
                        <el-dropdown-menu split-button="true">
                            <el-dropdown-item>读书</el-dropdown-item>
                            <el-dropdown-item>电影</el-dropdown-item>
                            <el-dropdown-item>音乐</el-dropdown-item>
                            <el-dropdown-item>同城</el-dropdown-item>
                            <el-dropdown-item>小组</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <div id="login">
                    <router-link :to="{path:'/cll/login'}">登录</router-link>
                </div>

            </el-header>
            <!-- 主要内容页面 -->
            <el-main>

                <el-carousel :interval="4000" type="card" height="300px">
                    <el-carousel-item v-for="item in carouseData" :key="item">
                        <img :src="lb+item.url" alt="" />
                    </el-carousel-item>
                </el-carousel>
                <div class="yinyue">
                    <h1>
                        <router-link :to="{path:'/wj/yysy'}">
                            <h1>音乐</h1>
                        </router-link>
                    </h1>
                    <div class="music-content">
                        <yy v-for="el in arr1" :key="el.oid" :obj1="el"></yy>

                    </div>
                    <div class="mod">


                        <h2>
                            本周流行音乐人
                            &nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·
                            <span class="pl">&nbsp;(

                                <a href="https://music.douban.com/artists/" target="_self">更多</a>
                                ) </span>
                        </h2>

                        <div class="list1 artist-charts">
                            <ul>
                                <li>
                                    <span class="num">1.</span>
                                    <div class="pic artist-song-play"
                                        data-sids="[&quot;508351&quot;, &quot;456566&quot;, &quot;366283&quot;]">
                                        <a href="https://site.douban.com/YamatoRyou/"><img
                                                src="https://img1.doubanio.com/img/site/small/dd6e4eb9ae433ba"
                                                data-origin="https://img1.doubanio.com/img/site/small/dd6e4eb9ae433ba"
                                                width="48"></a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-stat icon-play"></i>
                                    </div>
                                    <div class="content">
                                        <a href="https://site.douban.com/YamatoRyou/">Yamato Ryou</a>
                                        <div class="desc">
                                            流派: 电子 Electronica
                                            <br>331人关注
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <span class="num">2.</span>
                                    <div class="pic artist-song-play"
                                        data-sids="[&quot;39619&quot;, &quot;205&quot;, &quot;206&quot;]">
                                        <a href="https://site.douban.com/noname/"><img
                                                src="https://img2.doubanio.com/img/site/small/eaa4d1394c4ad63"
                                                data-origin="https://img2.doubanio.com/img/site/small/eaa4d1394c4ad63"
                                                width="48"></a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-stat icon-play"></i>
                                    </div>
                                    <div class="content">
                                        <a href="https://site.douban.com/noname/">The NONAME</a>
                                        <div class="desc">
                                            流派: 摇滚 Rock
                                            <br>906人关注
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <span class="num">3.</span>
                                    <div class="pic artist-song-play"
                                        data-sids="[&quot;10886&quot;, &quot;6290&quot;, &quot;4148&quot;]">
                                        <a href="https://site.douban.com/lavaoxsea/"><img
                                                src="https://img2.doubanio.com/img/site/small/716d484e4d455be"
                                                data-origin="https://img2.doubanio.com/img/site/small/716d484e4d455be"
                                                width="48"></a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-stat icon-play"></i>
                                    </div>
                                    <div class="content">
                                        <a href="https://site.douban.com/lavaoxsea/">LAVA|OX|SEA</a>
                                        <div class="desc">
                                            流派: 摇滚 Rock
                                            <br>1956人关注
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <span class="num">4.</span>
                                    <div class="pic artist-song-play"
                                        data-sids="[&quot;564525&quot;, &quot;564529&quot;, &quot;597450&quot;]">
                                        <a href="https://site.douban.com/jessechow/"><img
                                                src="https://img2.doubanio.com/img/site/small/bf91858914c1163"
                                                data-origin="https://img2.doubanio.com/img/site/small/bf91858914c1163"
                                                width="48"></a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-stat icon-play"></i>
                                    </div>
                                    <div class="content">
                                        <a href="https://site.douban.com/jessechow/">JESSE CHOW</a>
                                        <div class="desc">
                                            流派: 电子 Electronica
                                            <br>1074人关注
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <span class="num">5.</span>
                                    <div class="pic artist-song-play"
                                        data-sids="[&quot;8798&quot;, &quot;8800&quot;, &quot;55301&quot;]">
                                        <a href="https://site.douban.com/fadinghorizon/"><img
                                                src="https://img3.doubanio.com/img/site/small/b50d7235aaef0c0"
                                                data-origin="https://img3.doubanio.com/img/site/small/b50d7235aaef0c0"
                                                width="48"></a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-stat icon-play"></i>
                                    </div>
                                    <div class="content">
                                        <a href="https://site.douban.com/fadinghorizon/">Fading Horizon</a>
                                        <div class="desc">
                                            流派: 摇滚 Rock
                                            <br>1224人关注
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- <div class="remen">
                    <yy v-for="el in arr1" :key="el.oid" :obj1="el"></yy>

                </div> -->

                <el-backtop :right="100" :bottom="100" />

            </el-main>

            <!-- 页面底部 -->
            <el-footer></el-footer>
        </el-container>
    </div>
</template>
<style scoped>
.mod {
    color: #111;
    font: 12px Helvetica, Arial, sans-serif;
    line-height: 1.62;
    margin: 0;
    padding: 0;
    width: auto;
    margin-bottom: 30px;
    position: absolute;
    right: 100px;
    top: 450px;
    color: #01847f;
}

.remen {
    position: absolute;
    bottom: 0px;
    left: 25%;
    display: flex;
    flex-wrap: wrap;
    width: 75%;
    height: 75px;
    margin: 0 auto;

}

.el-header {

    display: flex;
    width: 100%;
    height: 70px;
    justify-content: space-around;
    margin: 0 0 0px 0;
    background-color: #F9D2E4;
    align-items: center;
}

/* 内容 */
.el-main {
    width: 1500px;
    height: 1500px;
    text-align: center;
    /* background-color: #01847f; */
    margin: 0 auto;
}


.yinyue .music-content {
    display: flex;
    flex-wrap: wrap;
    width: 750px;
    height: 75px;
    margin: 0 auto;
}

.el-carousel-item {
    width: auto;
    height: auto;
}

.el-footer {
    width: 100%;
    height: 150px;
    text-align: center;

    /* background-color: aqua; */
}

#login {
    width: 40px;
    height: 35px;
}

.search {
    display: flex;

}

.el-input {
    margin-top: 6px;
    margin-left: 10px;
}

.search .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.example-showcase .el-dropdown-link:hover {
    cursor: pointer;
}



h1 {
    color: #01847f;
}

.logo-link {
    display: inline-block;
    width: 110px;
    height: 34px;
    background-image: url("../img/logo-main.png");
    background-size: cover;
}

.el-input {
    outline: 0;
}

.el-menu-demo {
    background-color: #f9d2e4;
    height: 34px;
}

/* 轮播图 */
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    /* background-color: #5f6266; */
    /* background-size: cover; */
    background-image: url("/src/views/wyh/img/lunbo1")
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
